@charset "utf-8";

body{
	font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	background-image: url(../images/bus2.jpg);
	background-attachment:fixed;
	margin: 0;
}

h2{
	font-size:120%;
	color: #474547;
	margin-top: 0;
	margin-left: 10px;
	border-bottom: 3px solid #474547;
	font-family: Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace;
}
#lable{
	width: 160px;
	height: 20px;
	margin-top: 30px;
	margin-left: 10px;
	background-color: #5F5E6D;
	font-size:100%;
	font-weight: lighter;
	text-align: center;
	color:#fff;
	font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
}
#topic{
	font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	color: #5F5E6D;
	font-size: 100%;
	text-shadow: rgb(200,200,200) 2px 2px 1px;
	text-align: center;
}
.artical{
	padding: 25px;
	padding-top: 0px;
	padding-bottom: 5px;
	font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	font-size: 14px;
	line-height: 2em;
	color: #474547;
	border-bottom: 1px solid #CAC6D2;	
}
#header {
	margin-top:0px;
	margin-left:220px;
	margin-bottom: 20px;
	border:#fff;
	width: auto;
}

#header img#headerlLogo {
	float: left;
}

#tableContainer {
	display: table;
	border-spacing: 10px;
	margin-left:auto; 
	margin-right: auto;
}

#tableRow {
	display: table-row;
}

#sidebar {
    display: table-cell;
	vertical-align: top;
	
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    boxder:1px solid #fff; 
	
    width:250px;
	height: 700px;
	padding: 15px;
	
	background:rgba(255,255,255,0.7); 
}

#main{
	display: table-cell;
	vertical-align: top;
	
    border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
	boxder:1px solid #fff; 
	
	width: 650px;
	padding: 35px;
	
	background:rgba(255,255,255,0.7);
}

#footer {
	width: 800px;
  	color: #222;
	font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
  	text-align: center;
  	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
  	font-size: 90%;
}

#poem{
	text-align:center;
	font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	font-size: 14px;
	line-height: 3em;
	color: #2E0909;
}
h4{
	font-family:Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-size: 18px;
	color: #6A573E;
}
#label-3 a{
	width:130px;
	height: 20px;
	background-color: #726871;
	text-decoration:none;
	color:#fff;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-weight:bold;
	text-align: center;
	margin-left:50px;
	margin-bottom: 15px;
	display:block;
}
#nav{
	width:100%;
	line-height:40px;
	height:40px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	background:rgba(255,255,255,0.7);
	position: relative;
}

#nav ul{
	list-style:none;
	margin-left:230px;
	margin-right: auto;
	width:1030px
}

#nav ul li{
	width:100px;
	text-align:center;
	display: inline-block;
}

#nav ul li a{
	color:#726871;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-weight:bold;
	cursor:pointer;
	display:block;
	text-decoration: none;
}
#nav ul li a:hover{
	background:#5F5E6D;
	color:#FFF;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-weight:bold;
	border-radius:50px 0;
}
#nav ul li a:active{
	background:#5F5E6D;
	color:#FFF;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-weight:bold;
	border-radius:50px 0;
}
#nav ul li#nav_current a{
	background:#5F5E6D;
	color:#FFF;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-weight:bold;
	border-radius:50px 0;
}
@media screen and (max-width: 600px) {
	#nav {
		position: relative; 
		background: rgba(245, 245, 245, 0.2);
	}	
	#nav ul {
		width: 160px;
		position: absolute;
		background: #fff ;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.3);
	}
	#nav ul li {
		display: none; 
		margin: 0;
	}
	#nav #nav_current {
		display: block;
		background:#5F5E6D;
		color:#FFF;
		font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
		font-weight:bold;
		width:100%;
	}
	#nav #nav_current a {
		background: none;
		color: #666;
	}

	#nav ul:hover {
		background-image: none;
	}
	#nav ul:hover li {
		display: block;
		background:#5F5E6D;
	}
	#nav ul li:hover,#nav ul li a:hover {
		background:#5F5E6D;
		width:100%; 
		color:#FFF;
		font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
		font-weight:bold;
		border-radius:0;
	}
}
#headPortrait{
	float:left;
	margin-right: 15px;
}
#massage{
	font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	font-size: 14px;
	line-height: 30px;
	color: #474547;
}
.border{
	border-bottom: 1px solid #C9C6D1;
}
ul{
	list-style-type:none;
}
#picture{
	margin-right:0;
	margin-left: 35px;
	margin-top: 20px;
}
#lable-2{
	width: 100px;
	height: 20px;
	margin-top: 30px;
	margin-left: 280px;
	background-color: #2E0909;
	font-size:100%;
	font-weight: lighter;
	text-align: center;
	color:#fff;
	font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
}
.times {
	display:block;
	margin:15px 0;
}
.times ul {
	margin-left:25px;
	border-left:2px solid #ddd;
}/*利用ul标签的特性，设置外边框左移25px，左边边框是2px粗的实心线，颜色一般要浅一点*/
.times ul li {
	width:100%;
	margin-left:-12px;
	line-height:20px;
	font-weight:narmal;
}/*一般情况，通过li标签控制圆点回到时间线上，然后控制要出现的文字大小和是否粗体*/
.times ul li b {
	width:8px;
	height:8px;
	background:#fff;
	border:2px solid #555;
	margin:5px;
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	overflow:hidden;
	display:inline-block;
	float:left;
}/*利用处理加粗以外没有其它特别属性b标签做时间轴的圆点。*/
.times ul li span {
	padding-left:7px;
	font-size:14px;
	line-height:20px;
	color:#555;
}/*设置span标签的属性，让它来做时间显示，加一点边距，使时间显示离时间线远一点*/
.times ul li:hover b {
	border:2px solid #FF4500;
}/*注意这一行，前面的li标签后面加了一个:hover伪属性，意思是鼠标移上来，激活后面的属性，这样可以设置鼠标移动到整个时间范围的时候，时间点和时间显示会变色*/
.times ul li:hover span {
	color:#FF4500;
}/*同上*/
.times ul li p {
	padding-left:15px;
	font-size:16px;
	line-height:25px;
}/*这里利用段落标签p做文字介绍*/

